Visual Studio Code (VS Code) 設置全域ESLint

1. VS Code ESLint插件安裝

VS Code應該已經預設安裝ESLint，如沒有的話，到Extensions搜尋ESLint安裝。

2. 安裝全域ESLint

執行以下命令以全域安裝ESLint：

npm install -g eslint

3. 安裝所需套件

例如要安裝react plugin和babel-eslint：

npm install -g eslint-plugin-react @babel/eslint-parser

4. 設置全域 .eslintrc 檔案

在使用者目錄下建立.eslintrc檔案，以下為配置範例：

{
    "env": {
      "browser": true,
      "node": true
    },
    "extends": [
      "eslint:recommended",
      "plugin:react/recommended",
      'plugin:react/jsx-runtime',
    ],
    "parser": "/Users/UserName/.nvm/versions/node/v14.21.2/lib/node_modules/@babel/eslint-parser",
    "parserOptions": {
      "ecmaVersion": "latest",
      "sourceType": "module",
      requireConfigFile: false,
      "babelOptions": {
      "presets": ["/Users/UserName/.nvm/versions/node/v14.21.2/lib/node_modules/@babel/preset-react"]
     }
    },
    "settings": {
      "react": {
        "version": "detect"
      }
    },
    "rules": {
      "linebreak-style": ["error", "unix"], // 要求使用 Unix 換行符（LF）
      "semi": ["warn", "always"], // 要求語句末尾必須使用分號
      "no-console": ["off"], // 允許使用 console
      "eqeqeq": ["warn", "always"], // 要求使用 === 和 !==
      "new-cap": "off", // 關閉強制使用大寫字母命名建構函
      "no-unused-vars": "warn", // 未使用的變量僅發出警告
      "no-mixed-spaces-and-tabs": "off",
      "no-undef": "off",
      "react/prop-types": "off"
    }
  }

5. 配置 VS Code 的 settings.json

  "eslint.options": {
    // 指定全域插件位置
    "resolvePluginsRelativeTo": "/Users/UserName/.nvm/versions/node/v14.21.2/lib/node_modules",
    // 指定全域.eslintrc位置
    "configFile": "/Users/andy.tsai/.eslintrc"
    },
    // 指定全域eslint位置
    "eslint.nodePath": "/Users/UserName/.nvm/versions/node/v14.21.2/lib/node_modules",

這些都指定好路徑，可以避免許多錯誤，
例如resolvePluginsRelativeTo沒配置好，可能就會遇到 Failed to load plugin 'react' declared in 'PersonalConfig': Cannot find module 'eslint-plugin-react' Require stack: 類似的錯誤，表示 VS Code 無法找到全域的 eslint-plugin-react。

6. 完成

重新開啟VS Code，就完成了。
也可以看OUTPUT - ESLint，看看是否成功執行，或是有什麼Error。

如果報Error: Failed to load parser 'babel-eslint' declared in '.eslintrc': Cannot find module 'babel-eslint'，

檢查一下.eslintrc的@babel/eslint-parser，要用指定路徑的方式配置

"parser": "/Users/UserName/.nvm/versions/node/v14.21.2/lib/node_modules/@babel/eslint-parser",
    "parserOptions": {
      "babelOptions": {
      "presets": ["/Users/UserName/.nvm/versions/node/v14.21.2/lib/node_modules/@babel/preset-react"]
     }
    },